<div class="noselect">
  <ul class="categories-list">

    <li class="forest-change">
      <span class="category-name">FOREST CHANGE <i id="forest_clearing-category-num" class="category-num"></i></span>

      <div class="layers-nav">
        <div class="layers-nav-header">
          <div class="category-icon"><svg><use xlink:href="#icon-layer-forestchange"></use></svg></div>
          <span class="category-name">FOREST CHANGE</span>
        </div>
        <ul class="layers-list scroll-thin-dark">
          <div id="umd-group" class="layer-group">
            <span class="group-name" data-color="#f69">Tree cover change</span>
            <li class="layer" data-layer="loss">
              <span class="onoffswitch"><span></span></span>
              <span class="layer-title">Tree cover loss<a href='#' data-source='loss' class='source '><svg><use xlink:href="#shape-info"></use></svg></a></span>
              <span class="layer-info">(annual, 30m, global, Hansen/UMD/Google/USGS/NASA)</span>
            </li>
            <li class="layer" data-layer="forestgain">
              <span class="onoffswitch"><span></span></span>
              <span class="layer-title">Tree cover gain<a href='#' data-source='forestgain' class='source'><svg><use xlink:href="#shape-info"></use></svg></a></span>
              <span class="layer-info">(12 years, 30m, global, Hansen/UMD/Google/USGS/NASA)</span>
            </li>
            {{!-- <li class="layer" data-layer="guyra">
              <span class="onoffradio"><span></span></span>
              <span class="layer-title">Gran Chaco deforestation<a href='#' data-source='guyra' class='source'><svg><use xlink:href="#shape-info"></use></svg></a></span>
              <span class="layer-info">(monthly, 30m, Gran Chaco, Guyra)</span>
            </li>
            <li class="layer" data-layer="prodes">
              <span class="onoffradio"><span></span></span>
              <span class="layer-title">PRODES deforestation<a href='#' data-source='prodes' class='source'><svg><use xlink:href="#shape-info"></use></svg></a></span>
              <span class="layer-info">(annual, 30m, Brazilian Amazon, INPE)</span>
            </li> --}}
          </div>
          <div class="layer-group">
            <span class="group-name">Tree cover loss alerts <em>(near real-time)</em></span>
            {{!-- <li class="layer" data-layer="umd_as_it_happens">
              <span class="onoffradio"><span></span></span>
              <span class="layer-title">GLAD Tree Cover Loss Alerts<a href='#' data-source='gfw_landsat_alerts' class='source'><svg><use xlink:href="#shape-info"></use></svg></a></span>
              <span class="layer-info">(weekly, 30m, select countries, UMD/ GLAD)</span>
            </li>
            <li class="layer" data-layer="gfw_landsat_torque_alerts">
              <span class="onoffradio"><span></span></span>
              <span class="layer-title">GLAD Tree Cover Loss Alerts [Torque]<a href='#' data-source='gfw_landsat_alerts' class='source'><svg><use xlink:href="#shape-info"></use></svg></a></span>
              <span class="layer-info">(weekly, 30m, select countries, UMD/ GLAD)</span>
            </li> --}}
            <li class="layer" data-layer="forma">
              <span class="onoffradio"><span></span></span>
              <span class="layer-title">FORMA<a href='#' data-source='forma' class='source'><svg><use xlink:href="#shape-info"></use></svg></a></span>
              <span class="layer-info">(quarterly, 500m, humid tropics, WRI/CGD)</span>
            </li>
            {{!-- <li class="wrapped-layer">
              <span class="onoffradio"><span></span></span>
              <span class="layer-title">FORMA 250<a href='#' data-source='forma' class='source'><svg><use xlink:href="#shape-info"></use></svg></a></span>
              <span class="layer-info">(daily, 250m, humid tropics, WRI/CGD)</span>
              <span class="layer-info">
                <label data-layer="brazil_forma_250" class="layer wrapped">
                  <span></span>
                  <input type="radio" />Brazil
                </label>
                <label data-layer="drc_forma_250" class="layer wrapped">
                  <span></span>
                  <input type="radio" />Democratic Republic of Congo
                </label>
                <label data-layer="indonesia_forma_250" class="layer wrapped">
                  <span></span>
                  <input type="radio" />Indonesia
                </label>
                <label data-layer="laos_forma_250" class="layer wrapped">
                  <span></span>
                  <input type="radio" />Laos
                </label>
                <label data-layer="peru_forma_250" class="layer wrapped">
                  <span></span>
                  <input type="radio" />Peru
                </label>
              </span>
            </li> --}}
            <li class="layer" data-layer="terrailoss">
              <span class="onoffradio"><span></span></span>
              <span class="layer-title">Terra-i<a href='#' data-source='terrailoss' class='source'><svg><use xlink:href="#shape-info"></use></svg></a></span>
              <span class="layer-info">(monthly, 250m, Latin America, CIAT)</span>
            </li>
            <li class="layer" data-layer="imazon">
              <span class="onoffradio"><span></span></span>
              <span class="layer-title">SAD<a href='#' data-source='imazon' class='source'><svg><use xlink:href="#shape-info"></use></svg></a></span>
              <span class="layer-info">(monthly, 250m, Brazilian Amazon, Imazon)</span>
            </li>
            <li class="layer" data-layer="modis">
              <span class="onoffradio"><span></span></span>
              <span class="layer-title">QUICC<a href='#' data-source='modis' class='source'><svg><use xlink:href="#shape-info"></use></svg></a></span>
              <span class="layer-info">(quarterly, 5km, &lt;37 degrees north, NASA)</span>
            </li>
          </div>
          <div class="layer-group">
            <li class="layer" data-layer="fires">
              <span class="onoffradio"><span></span></span>
              <span class="layer-title">FIRMS active fires<a href='#' data-source='fires' class='source'><svg><use xlink:href="#shape-info"></use></svg></a></span>
              <span class="layer-info">(daily, 1km, global, NASA)</span>
            </li>
          </div>
        </ul>
      </div>
    </li>

    <li class="forest-cover">
      <span class="category-name">LAND COVER <i id="forest_cover-category-num" class="category-num"></i></span>

      <div class="layers-nav">
        <div class="layers-nav-header">
          <div class="category-icon"><svg><use xlink:href="#icon-layer-forestcover"></use></svg></div>
          <span class="category-name">LAND COVER</span>
        </div>
        <ul class="layers-list scroll-thin-dark">
          <li class="layer" data-layer="forest2000">
            <span class="onoffswitch"><span></span></span>
            <span class="layer-title">Tree cover<a href='#' data-source='forest2000' class='source'><svg><use xlink:href="#shape-info"></use></svg></a></span>
            <span class="layer-info">(2000, Hansen/UMD/Google/USGS/NASA)</span>
          </li>
          <li class="layer" data-layer="ifl_2013_deg">
            <span class="onoffswitch"><span></span></span>
            <span class="layer-title">Intact Forest Landscapes<a href='#' data-source='ifl_2013_deg' class='source'><svg><use xlink:href="#shape-info"></use></svg></a></span>
            <span class="layer-info">(2000/2013)</span>
            {{!-- <span class="layer-info">
              <label data-layer="ifl_2000" class="layer wrapped">
                <span></span>
                <input type="radio" />2000
              </label>
              <label data-layer="ifl_2013_deg" class="layer wrapped">
                <span></span>
                <input type="radio" />2013
              </label>
            </span> --}}
          </li>
          <li class="layer" data-layer="pantropical">
            <span class="onoffswitch"><span></span></span>
            <span class="layer-title">Tropical forest carbon stocks<a href='#' data-source='pantropical' class='source'><svg><use xlink:href="#shape-info"></use></svg></a></span>
            <span class="layer-info">(2000)</span>
          </li>
          <li class="layer" data-layer="mangrove">
            <span class="onoffswitch"><span></span></span>
            <span class="layer-title">Mangrove forests<a href='#' data-source='mangrove' class='source'><svg><use xlink:href="#shape-info"></use></svg></a></span>
          </li>
{{!--           <li class="layer" data-layer="global_land_cover">
            <span class="onoffswitch"><span></span></span>
            <span class="layer-title">Land cover<a href='#' data-source='global_land_cover' class='source'><svg><use xlink:href="#shape-info"></use></svg></a></span>
            <span class="layer-info">(2009)</span>
          </li>
          <li class="wrapped-layer" data-color="#D67828">
            <span class="onoffswitch"><span></span></span>
            <span class="layer-title">Tree plantations<a href='#' data-source='plantations' class='source'><svg><use xlink:href="#shape-info"></use></svg></a></span>
            <span class="layer-info">(2013-2014, select countries)</span>
            <span class="layer-info">
              <label data-layer="plantations_by_type" class="layer wrapped">
                <span></span>
                <input type="radio" />by type
              </label>
              <label data-layer="plantations_by_species" class="layer wrapped">
                <span></span>
                <input type="radio" />by species
              </label>
            </span>
          </li> --}}
        </ul>
      </div>
    </li>

    <li class="forest-use">
      <span class="category-name">LAND USE <i id="forest_use-category-num" class="category-num"></i></span>
      <div class="layers-nav">
        <div class="layers-nav-header">
          <div class="category-icon"><svg><use xlink:href="#icon-layer-forestuse"></use></svg></div>
          <span class="category-name">LAND USE</span>
        </div>
        <ul class="layers-list scroll-thin-dark">
          <div class="layer-group">
            <span class="group-name">Concessions</span>
            <li class="layer" data-layer="logging">
              <span class="onoffswitch"><span></span></span>
              <span class="layer-title">Managed forests<a href='#' data-source='logging' class='source'><svg><use xlink:href="#shape-info"></use></svg></a></span>
              <span class="layer-info">(select countries)</span>
            </li>
            <li class="layer" data-layer="mining">
              <span class="onoffswitch"><span></span></span>
              <span class="layer-title">Mining<a href='#' data-source='mining' class='source'><svg><use xlink:href="#shape-info"></use></svg></a></span>
              <span class="layer-info">(select countries)</span>
            </li>
            <li class="layer" data-layer="oil_palm">
              <span class="onoffswitch"><span></span></span>
              <span class="layer-title">Oil palm<a href='#' data-source='oil_palm' class='source'><svg><use xlink:href="#shape-info"></use></svg></a></span>
              <span class="layer-info">(select countries)</span>
            </li>
            <li class="layer" data-layer="wood_fiber_plantations">
              <span class="onoffswitch"><span></span></span>
              <span class="layer-title">Wood fiber<a href='#' data-source='wood_fiber_plantations' class='source'><svg><use xlink:href="#shape-info"></use></svg></a></span>
              <span class="layer-info">(select countries)</span>
            </li>
          </div>
          <div class="layer-group">
            <span class="group-name">Infrastructure</span>
            <li class="layer" data-layer="dam_hotspots">
              <span class="onoffswitch"><span></span></span>
              <span class="layer-title">Major dams<a href='#' data-source='dam_hotspots' class='source'><svg><use xlink:href="#shape-info"></use></svg></a></span>
            </li>
            {{!-- <li class="layer" data-layer="logging_roads">
              <span class="onoffswitch"><span></span></span>
              <span class="layer-title">Congo Basin logging roads<a href='#' data-source='logging_roads' class='source'><svg><use xlink:href="#shape-info"></use></svg></a></span>
            </li> --}}
          </div>
        </ul>
      </div>
    </li>

    <li class="conservation">
      <span class="category-name">CONSERVATION <i id="conservation-category-num" class="category-num"></i></span>

      <div class="layers-nav">
        <div class="layers-nav-header">
          <div class="category-icon"><svg><use xlink:href="#icon-layer-conservation"></use></svg></div>
          <span class="category-name">CONSERVATION</span>
        </div>
        <ul class="layers-list scroll-thin-dark">
          <li class="layer" data-layer="protected_areasCDB">
            <span class="onoffswitch"><span></span></span>
            <span class="layer-title">Protected areas<a href='#' data-source='protected_areas' class='source'><svg><use xlink:href="#shape-info"></use></svg></a></span>
          </li>
          <li class="layer" data-layer="biodiversity_hotspots">
            <span class="onoffswitch"><span></span></span>
            <span class="layer-title">Biodiversity hotspots<a href='#' data-source='biodiversity_hotspots' class='source'><svg><use xlink:href="#shape-info"></use></svg></a></span>
          </li>
{{!--           <li class="layer" data-layer="wwf">
            <span class="onoffswitch"><span></span></span>
            <span class="layer-title">WWF Terrestrial Ecoregions of the World<a href='#' data-source='wwf' class='source'><svg><use xlink:href="#shape-info"></use></svg></a></span>
          </li> --}}
          <li class="layer" data-layer="birdlife">
            <span class="onoffswitch"><span></span></span>
            <span class="layer-title">BirdLife Endemic Bird Areas<a href='#' data-source='birdlife' class='source'><svg><use xlink:href="#shape-info"></use></svg></a></span>
          </li>
          <li class="layer" data-layer="azepoly">
            <span class="onoffswitch"><span></span></span>
            <span class="layer-title">Alliance for Zero Extinction sites<a href='#' data-source='azepoly' class='source'><svg><use xlink:href="#shape-info"></use></svg></a></span>
          </li>
          <li class="layer" data-layer="tigers">
            <span class="onoffswitch"><span></span></span>
            <span class="layer-title">Tiger Conservation Landscapes<a href='#' data-source='tigers' class='source'><svg><use xlink:href="#shape-info"></use></svg></a></span>
          </li>

{{!--           <li class="layer" data-layer="verified_carbon">
            <span class="onoffswitch"><span></span></span>
            <span class="layer-title">Verified Carbon Standard project areas<a href='#' data-source='verified_carbon' class='source'><svg><use xlink:href="#shape-info"></use></svg></a></span>
          </li> --}}
        </ul>
      </div>
    </li>

    <li class="people">
      <span class="category-name">PEOPLE <i id="people-category-num" class="category-num"></i></span>

      <div class="layers-nav">
        <div class="layers-nav-header">
          <div class="category-icon"><svg><use xlink:href="#icon-layer-people"></use></svg></div>
          <span class="category-name">PEOPLE</span>
        </div>
        <ul class="layers-list scroll-thin-dark">
          <li class="layer" data-layer="resource_rights">
            <span class="onoffswitch"><span></span></span>
            <span class="layer-title">Resource rights<a href='#' data-source='resource_rights' class='source'><svg><use xlink:href="#shape-info"></use></svg></a></span>
            <span class="layer-info">(select countries)</span>
          </li>
          <li class="layer" data-layer="land_rights">
            <span class="onoffswitch"><span></span></span>
            <span class="layer-title">Land rights<a href='#' data-source='land_rights' class='source'><svg><use xlink:href="#shape-info"></use></svg></a></span>
            <span class="layer-info">(select countries)</span>
          </li>
          <li class="layer" data-layer="grump2000">
            <span class="onoffswitch"><span></span></span>
            <span class="layer-title">Population density<a href='#' data-source='grump2000' class='source'><svg><use xlink:href="#shape-info"></use></svg></a></span>
            <span class="layer-info">(2000)</span>
          </li>
{{!--           <li class="layer" data-layer="raisg">
            <span class="onoffswitch"><span></span></span>
            <span class="layer-title">Amazon basin indigenous territories<a href='#' data-source='raisg' class='source'><svg><use xlink:href="#shape-info"></use></svg></a></span>
            <span class="layer-info">(RAISG)</span>
          </li> --}}
        </ul>
      </div>
    </li>

    <li class="stories">
      <span class="category-name">STORIES <i id="stories-category-num" class="category-num"></i></span>

      <div class="layers-nav">
        <div class="layers-nav-header">
          <div class="category-icon"><svg><use xlink:href="#icon-layer-stories"></use></svg></div>
          <span class="category-name">STORIES</span>
        </div>
        <ul class="layers-list scroll-thin-dark">
          <li class="layer" data-layer="user_stories">
            <span class="onoffswitch"><span></span></span>
            <span class="layer-title">User stories<a href='#' data-source='user_stories' class='source'><svg><use xlink:href="#shape-info"></use></svg></a></span>
          </li>
          <li class="layer" data-layer="mongabay">
            <span class="onoffswitch"><span></span></span>
            <span class="layer-title">Mongabay stories<a href='#' data-source='mongabay' class='source'><svg><use xlink:href="#shape-info"></use></svg></a></span>
          </li>
          <li class="layer" data-layer="infoamazonia">
            <span class="onoffswitch"><span></span></span>
            <span class="layer-title">Earth Journalism Network stories<a href='#' data-source='infoamazonia' class='source'><svg><use xlink:href="#shape-info"></use></svg></a></span>
          </li>
        </ul>
      </div>
    </li>

    <li id="country-layers" class="country-layers-nav country disabled">
      <span class="category-name">COUNTRY LAYERS <i id="forest_clearing-category-num" class="category-num"></i></span>
    </li>
    <li id="country-layers-reset" class="country-close disabled hidden">
      <button class="btn close"><span><svg><use xlink:href="#shape-close"></use></svg></span></button>
    </li>
  </ul>
</div>
